美しい日本の風景
|
<HTML> <HEAD> <TITLE>初めてのホームページ作成</TITLE> <SCRIPT language="JavaScript"> <!-- function ue(ss,xx,yy){ document.getElementById('kage').style.left=xx; document.getElementById('kage').style.top=yy; document.getElementById('kage').style.zIndex=10; document.getElementById(ss).style.left=xx-10; document.getElementById(ss).style.top=yy-10; document.getElementById(ss).style.zIndex=11; document.getElementById(ss).style.borderStyle="solid"; document.getElementById(ss).style.borderWidth=2; document.getElementById(ss).style.borderColor="red"; } function shita(ss,xx,yy,zz){ document.getElementById('kage').style.zIndex=1; document.getElementById(ss).style.left=xx; document.getElementById(ss).style.top=yy; document.getElementById(ss).style.zIndex=zz; document.getElementById(ss).style.borderWidth=0; } //--> </SCRIPT> </HEAD> <BODY> <DIV style="position:relative; top:0px; left:0px ; height:320px"> <DIV id="kage" style="position:absolute; top:0px; left:10px; z-index:1; width:200px; height:150px; background-color:#AAAAAA"> </DIV> <IMG src="photo1.jpg" id="img1" style="position:absolute; left:10px; top:0px; z-index:2" onMouseOver="ue('img1',10,0)" onMouseOut="shita('img1',10,0,2)"> <IMG src="photo2.jpg" id="img2" style="position:absolute; left:250px; top:20px; z-index:6" onMouseOver="ue('img2',250,20)" onMouseOut="shita('img2',250,20,6)"> <IMG src="photo3.jpg" id="img3" style="position:absolute; left:140px; top:100px; z-index:4" onMouseOver="ue('img3',140,100)" onMouseOut="shita('img3',140,100,4)"> <IMG src="photo4.jpg" id="img4" style="position:absolute; left:20px; top:140px; z-index:3" onMouseOver="ue('img4',20,140)" onMouseOut="shita('img4',20,140,3)"> <IMG src="photo5.jpg" id="img5" style="position:absolute; left:320px; top:150px; z-index:5" onMouseOver="ue('img5',320,150)" onMouseOut="shita('img5',320,150,5)"> </DIV> </BODY> </HTML> |